import React, { useState, useEffect } from 'react'
import { FloatingBall } from 'react-vant'
import top from '@/assets/images/top.png'
import './index.less'

const Index = () => {
  
  const [scroll, setScroll] = useState(0)

  let time = null

  const getScroll = () => {
    if (time) {
      return
    }
    time = setTimeout(() => {
      setScroll(
        document.documentElement.scrollTop ||
          window.pageYOffset ||
          document.body.scrollTop
      )
      time = null
    },300)
  }

  useEffect(() => {
    window.addEventListener('scroll', getScroll)
    return () => {
      window.removeEventListener('scroll', getScroll, false)
    }
  }, [])

  return (
    <>
      <FloatingBall
        className="arrowup"
        offset={{
          right: -80,
          bottom: 110,
        }}
        adsorb={{
          // 滚动缩进比例
          indent: 1,
          // 近边停靠距离
          distance: 20,
        }}
      >
        {scroll > 300 ? (
          <img
            onClick={() =>
              window.scrollTo({
                top: 0,
                behavior: 'smooth',
              })
            }
            className="mhy-img-icon"
            src={top}
          />
        ) : null}
      </FloatingBall>
    </>
  )
}

export default Index
